<template>
	<view class="padding-top">
		<view class="g-goBack" @click="$utils.toBack()">
			<view class="cuIcon-back"></view>
		</view>
		<view class="board">
			<view class="lists">
				<view class="item">
					<text>当前用户</text>
					<text class="text-gray" v-if="userInfo.nickname">{{userInfo.nickname}}</text>
				</view>
				<view class="item">
					<text>手机号码</text>
					<text class="text-gray" v-if="userInfo.phone">{{userInfo.phone}}</text>
				</view>
			</view>
		</view>
		<block v-if="roles.length>0">
			<view class="board">
				<block v-for="(item,index) in roles" :key="index">
					<!-- <view class="botLine flex-start"  @click="curIndex=index"> -->
					<view class="botLine flex-between" :class="userInfo.roleType==item.roleType?'cur':''">
						<view class="flex-start">
							<image src="/static/head.png" mode="aspectFit"></image>
							<view class="margin-left">
								<text>{{item.userName}}</text>
								<text style="color: #999999;">【{{item.roleTypeName}}】</text>
							</view>
						</view>
						<block v-if="userInfo.roleType!=item.roleType">
							<view class="change" @click="switchToUser(index)">切换</view>
						</block>
						<block v-else>
							<view class="txt">当前账号等级</view>
						</block>
					</view>
				</block>
			</view>
			<!-- <view class="button" @click="switchToUser">切换</view> -->
		</block>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo:'',
				roles:[],
				curIndex:0
			}
		},
		onLoad() {
			this.userInfo = this.$store.getters.GET_userInfo;
			const api = this.$request;
			api.post(api.url.myInfoList,{},res=>{
				if(res.code==200){
					this.roles = res.body.items
				}
			})
		},
		methods: {
			switchToUser(index){
				const info = this.roles[index];
				console.log(this.userInfo)
				const self = this;
				const api = this.$request;
				uni.showModal({
					title:'切换角色',
					content:'确定切换角色？',
					success(res) {
						if(res.confirm){
							api.post(api.url.myChange,{
								userId:info.superiorId,
								// SuperiorId:info.superiorId,             //上一级的ID号
								roleType:info.roleType
							},res=>{
								if(res.code==200){
									self.$store.commit('SET_userInfo',res.body)
									uni.showModal({
										title:'切换角色',
										content:'切换成功',
										showCancel:false,
										success() {
											uni.reLaunch({
												url:'/pages/index/index'
											})
										}
									})
								}else{
									uni.showToast({
										title:res.msg,
										icon:'none'
									})
								}
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.board{
		margin-top: 20rpx;
		padding: 20rpx 40rpx;
		background-color: white;
		box-shadow: 0 0 10rpx #e0e0e0;
		.lists .item{
			height: 80rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.cuIcon-right{
				color: #999999;
			}
			&:nth-child(n+2){
				border-top: 1rpx solid #f0f0f0;
			}
		}
		image{
			width: 68rpx;
			height: 68rpx;
			border-radius: 50%;
			box-shadow: 0 10rpx 10rpx #e0e0e0;
		}
		.flex-between{
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.flex-start{
			display: flex;
			justify-content: flex-start;
			align-items: center;
		}
		.botLine{
			padding: 10rpx 0;
			&:nth-child(n+2){
				border-top: 1rpx solid #f0f0f0;
			}
			&.cur{
				background-color: #f0f0f0;
				border-radius: 100rpx 0 0 100rpx;
			}
			.change{
				padding: 6rpx 26rpx;
				color: white;
				background:linear-gradient(90deg,#f4b349,#ec7136);
				border-radius: 4rpx;
			}
			.txt{
				color: #909090;
				font-size: 24rpx;
				padding-right: 20rpx;
			}
		}
	}
	.button{
		width: 90%;
		height: 68rpx;
		margin: 40rpx auto 0;
		border-radius: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: white;
		background:linear-gradient(90deg,#f4b349,#ec7136);
	}
</style>
